<template>
    <div class="loginPage">
        <div class="content">
            <van-cell-group :border="false">
                <div class="userLogin">
                     <div class="input-container">
                        <van-field
                            v-model="phone"
                            clearable
                            :border="false"
                            placeholder="请输入手机号码"
                        >
                        <span slot="left-icon" @click="popShow = true" class="mobileArea"><i>+{{mobileArea}}</i><van-icon name="arrow-down "></van-icon></span>
                        </van-field>
                    </div>
                    <!-- <div class="input-container">
                        <van-field
                            v-model="imgCode"
                            clearable
                            :border="false"
                            placeholder="请输入右侧验证码"
                        >
                            <img src="" slot="button" class="codeImg"/>
                        </van-field>

                    </div> -->
                   
                    <div class="input-container">
                         <van-field
                            v-model="verifyCode"
                            type="text"
                            clearable
                            :border="false"
                            placeholder="请输入验证码"
                        />
                        <button class="sendSms" @click="sendSms">{{btnText}}</button>
                    </div>
                    <div class="input-container">
                         <van-field
                            v-model="password"
                            type="password"
                            clearable
                            :border="false"
                            placeholder="请输入新密码"
                        />
                    </div>

                    <div class="input-container">
                         <van-field
                            v-model="passwordAgain"
                            type="password"
                            clearable
                            :border="false"
                            placeholder="请再次输入新密码"
                        />
                    </div>
                </div>
            </van-cell-group>
            <div class="notice"></div>
            <van-button round type="primary" :disabled="disabled" @click="submit">确&nbsp;认</van-button>
        </div>

        <van-popup position="bottom" v-model="popShow">
            <van-picker :columns="mobileAreaList"  @cancel="popShow = false" show-toolbar @confirm="areaChange"></van-picker>
        </van-popup>
    </div>
</template>

<script>
 
import reg from './../../lib/pwdReg';
import md5 from 'js-md5';
export default {
    name: 'forget',
    data() {
        return {
            popShow: false,
            mobileAreaList: [{
                text: '中国 +86',
                value: '86'
            }],
            btnText: '获取验证码',
            time: 60,


            
            mobileArea: '86',
            password: '',
            passwordAgain: '',
            phone: '',
            verifyCode: '',

        }
    },

    methods: {
        areaChange(self) {
            this.mobileArea = self.value;
            this.popShow = false;
        },

        count() {
            let timer = setInterval(() => {
                this.time--;
                if (this.time <= 0) {
                    clearInterval(timer);
                    this.time = 60;
                    this.btnText = '获取验证码';
                    return;
                }
                this.btnText = `${this.time}秒`
            }, 1000)
        },
        sendSms() {
            if (this.time != 60) {return;}
            if (this.phone === '') {
                this.$toast('请输入手机号码');
                return;
            }
            this.$http.post('/msg/verifyCode/front/getVerifyCode', {
                mobileArea: this.mobileArea,
                mobile: this.phone,
                templateKey: 50,
            }).then(res => {
                if (res.status === 0) {
                    this.$toast.success('发送成功');
                    this.count(); //开始倒计时
                } else {
                     this.$toast.fail(res.message);
                }
            })
        },


        submit() {
            if (!this.phone) {
                this.$toast('请输入手机号码');
                return;
            }

            if (!this.verifyCode) {
                this.$toast('请输入短信验证码');
                return;
            }

            if (!this.password) {
                this.$toast(reg.empty);
                return;
            }


            if (!reg.reg.test(this.password)) {
                this.$toast(reg.text);
                return;
            }
            if (!this.passwordAgain) {
                this.$toast('请再次确认密码');
                return;
            }

            if (this.passwordAgain !== this.password) {
                this.$toast('两次密码输入不一致');
                return;
            }
 


            this.$http.post('/user/auth/front/forgetLoginPwd', {
                mobile: this.phone,
                mobileArea: this.mobileArea,
                verifyCode: this.verifyCode,
                newLoginPwd: md5(this.password),
            }).then(res => {
                if (res.status === 0) {
                    this.$toast.success('重置成功');
                    setTimeout(() => {
                        this.$router.back();
                    }, 600)
                } else {
                     this.$toast.fail(res.message);
                }
            })

        }
    },

    computed: {
        disabled() {
            return !(this.phone !== '' && this.password !== '' && this.code !== '' && this.passwordAgain !== '');
        }
    }
}
</script>

<style scoped lang="scss">
    .loginPage {
        width: 100%;
        height: 100%;
        padding-top: 20px;
        background-color: #fff;
    }
    
    .content {
        padding: 0 20px;
        .input-container {
            margin-top: 10px;
            padding: 3px 0;
            border-bottom: 1px solid #efefef;
            display: flex;
            align-items: center;
            /deep/ .van-field {
                flex: 1;
            }
            /deep/ .van-field__button {
                padding: 0;
                height: 34px;
            }
            .codeImg {
                height: 34px;
                width: 100px;
            }

            .mobileArea {
                display: flex;
                align-items: center;
                padding: 0 10px;
                i {
                    margin-right: 3px;
                }
            }
            button {
                color: #222;
                font-size: 14px;
                border: 0;
                outline: 0;
                border-radius: 2px;
                text-align: center;
                border-left: 1px solid #ccc;
                -webkit-box-shadow: none;
                box-shadow: none;
                height: 34px;
                line-height: 34px;
                background-color: #fff;
                &.sendSms {
                    width: 100px;
                    text-align: center;
                
                }
                
            }
        }
   
        /deep/ .van-button {
            width: 100%;
            margin-top: 20px;
        }
         
    }
</style>
